/*
 * QueryResultTable.js - 完全自包含的查询结果表格组件
 * 文档保存目录：/e:/DEV_VISION/frontend/static/js/QueryResultTable.js
 *
 * 功能说明：
 *   1. 完全配置驱动，自动获取字段配置
 *   2. 内置字段显示名称映射，无需外部处理
 *   3. 自动处理操作按钮配置和事件绑定
 *   4. 支持分页显示
 *   5. 兼容Bootstrap全局样式，无需自定义CSS
 *
 * 使用方法：
 *   1. 页面预留表格容器：
 *      <div id="queryResults">
 *        <table class="table table-striped table-hover">
 *          <thead id="queryTableHead"></thead>
 *          <tbody id="queryTableBody"></tbody>
 *        </table>
 *        <nav><ul class="pagination" id="queryPagination"></ul></nav>
 *      </div>
 *   2. 调用组件（简化API）：
 *      renderQueryResultTable(data, moduleName, containerId, options)
 *      - data: 查询结果数据数组
 *      - moduleName: 模块名称 ('vision', 'followup', 'intervention', 'data_entry')
 *      - containerId: 容器ID前缀（默认'query'）
 *      - options: 可选配置（分页、回调函数等）
 */

// 🔧 优化：字段显示名称映射改为配置驱动
// 原有硬编码的 FIELD_DISPLAY_NAMES 已移除，改为从配置API获取

// 模块操作按钮配置 - 待优化为配置驱动
const MODULE_ACTIONS = {
  'vision': [
    { text: '查询', handler: 'showStudentInfo', className: 'btn btn-link btn-sm' },
    { text: '录入', handler: 'addVisionRecord', className: 'btn btn-primary btn-sm' }
  ],
  'followup': [
    { text: '查询', handler: 'showStudentHistory', className: 'btn btn-link btn-sm' },
    { text: '录入', handler: 'selectStudent', className: 'btn btn-primary btn-sm' }
  ],
  'intervention': [
    { text: '查询', handler: 'showStudentHistory', className: 'btn btn-link btn-sm' },
    { text: '录入', handler: 'selectStudent', className: 'btn btn-primary btn-sm' }
  ],
  'data_entry': [
    { text: '查询', handler: 'showStudentHistory', className: 'btn btn-link btn-sm' },
    { text: '录入', handler: 'selectStudent', className: 'btn btn-primary btn-sm' }
  ],
  'student_archive': [
    { text: '查看档案', handler: 'viewStudentRecord', className: 'btn btn-primary btn-sm' }
  ]
};

// 缓存配置以避免重复请求
const configCache = new Map();

/**
 * 主要API - 渲染查询结果表格（完全自包含）
 * @param {Array} data - 查询结果数据
 * @param {string} moduleName - 模块名称 ('vision', 'followup', 'intervention', 'data_entry')
 * @param {string} containerId - 容器ID前缀，默认'query'
 * @param {Object} options - 可选配置
 * @param {Object} options.pagination - 分页配置 {total, page, perPage, onPageChange}
 * @param {Function} options.onRowClick - 行点击事件
 * @param {boolean} options.showRowNumber - 是否显示行号
 * @param {Object} options.customHandlers - 自定义操作按钮处理函数
 * @param {Array} options.actions - 自定义操作按钮配置数组
 */
async function renderQueryResultTable(data, moduleName, containerId = 'query', options = {}) {
  console.log(`🔧 QueryResultTable: 渲染${moduleName}模块表格, 数据量:`, data?.length || 0);
  
  const tableHead = document.getElementById(`${containerId}TableHead`);
  const tableBody = document.getElementById(`${containerId}TableBody`);
  
  if (!tableHead || !tableBody) {
    console.error(`❌ 找不到表格容器: ${containerId}TableHead 或 ${containerId}TableBody`);
    return;
  }

  // 清空表格
  tableHead.innerHTML = "";
  tableBody.innerHTML = "";
  
  // 获取字段配置
  let fieldConfig;
  try {
    fieldConfig = await getModuleFieldConfig(moduleName);
  } catch (error) {
    console.error(`❌ 获取${moduleName}模块字段配置失败:`, error);
    renderErrorTable(tableBody, `配置加载失败: ${error.message}`);
    return;
  }

  if (!data || !data.length) {
    renderEmptyTable(tableBody, fieldConfig.length);
    return;
  }

  // 渲染表头
  renderTableHeader(tableHead, fieldConfig, moduleName, options);
  
  // 渲染表格数据
  renderTableBody(tableBody, data, fieldConfig, moduleName, options);
  
  // 渲染分页（如果有）
  if (options.pagination) {
    renderTablePagination(options.pagination, containerId);
  }
  
  console.log(`✅ QueryResultTable: ${moduleName}模块表格渲染完成`);
}

/**
 * 获取模块字段配置（自动缓存）
 */
async function getModuleFieldConfig(moduleName) {
  const cacheKey = `fields_${moduleName}`;
  
  if (configCache.has(cacheKey)) {
    return configCache.get(cacheKey);
  }
  
  try {
    const response = await fetch(`/api/config/search_result_fields/${moduleName}`);
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    
    const result = await response.json();
    if (!result.success) {
      throw new Error(result.error || '配置获取失败');
    }
    
    const fields = result.fields || [];
    
    // 过滤掉操作字段，因为操作按钮由MODULE_ACTIONS单独处理
    const dataFields = fields.filter(field => {
      const isActionField = field.field === 'actions' || field.input_type === 'actions';
      if (isActionField) {
        console.log(`🚫 过滤掉操作字段: ${field.field}`);
      }
      return !isActionField;
    });
    
    console.log(`📋 原始字段数量: ${fields.length}, 过滤后数据字段数量: ${dataFields.length}`);
    dataFields.forEach(field => console.log(`✅ 数据字段: ${field.field} (${field.display_name})`));
    
    // 缓存字段配置和列名列表
    configCache.set(cacheKey, dataFields);
    configCache.set(`${cacheKey}_columns`, dataFields.map(field => field.field));
    
    console.log(`✅ 获取${moduleName}模块字段配置成功, 字段数量:`, dataFields.length);
    
    return dataFields;
  } catch (error) {
    console.error(`❌ 获取${moduleName}模块字段配置失败:`, error);
    throw error;
  }
}

/**
 * 获取模块查询字段列表
 */
function getModuleQueryColumns(moduleName) {
  const cacheKey = `fields_${moduleName}_columns`;
  return configCache.get(cacheKey) || [];
}

/**
 * 渲染表头
 */
function renderTableHeader(tableHead, fieldConfig, moduleName, options = {}) {
  const headerRow = document.createElement("tr");
  
  // 行号列
  if (options.showRowNumber !== false) {
    const th = document.createElement("th");
    th.textContent = "序号";
    th.style.width = "60px";
    th.style.textAlign = "center";
    headerRow.appendChild(th);
  }
  
  // 数据列
  fieldConfig.forEach((field) => {
    // 🔧 修复：跳过隐藏字段的表头渲染
    if (field.hidden === true) {
      console.log(`🚫 跳过隐藏字段表头: ${field.field}`);
      return;
    }
    
    const th = document.createElement("th");
    const fieldKey = field.field || field.key;
    th.setAttribute("data-field", fieldKey);
    
    // 🔧 优化：使用配置驱动的字段显示名称
    const displayName = field.display_name || fieldKey;
    th.textContent = displayName;
    
    // 设置列宽
    if (field.width) {
      th.style.width = field.width;
    }
    
    headerRow.appendChild(th);
  });
  
  // 🔧 优化：支持自定义操作按钮配置
  const moduleActions = options.actions || MODULE_ACTIONS[moduleName];
  if (moduleActions && moduleActions.length > 0) {
    const th = document.createElement("th");
    th.textContent = "操作";
    th.style.width = `${Math.max(moduleActions.length * 60, 100)}px`;
    th.style.textAlign = "center";
    headerRow.appendChild(th);
  }
  
  tableHead.appendChild(headerRow);
}

/**
 * 渲染表格数据（参考视力模块风格）
 */
/**
 * 渲染表格内容
 */
function renderTableBody(tableBody, data, fieldConfig, moduleName, options = {}) {
  data.forEach((row, index) => {
    const tr = document.createElement("tr");
    
    // 添加行点击事件
    if (options.onRowClick) {
      tr.style.cursor = "pointer";
      tr.addEventListener("click", () => options.onRowClick(row, index));
    }
    
    // 行号列
    if (options.showRowNumber !== false) {
      const td = document.createElement("td");
      td.textContent = index + 1;
      td.className = "text-center text-muted";
      tr.appendChild(td);
    }
    
    // 数据列
    fieldConfig.forEach((field) => {
      // 🔧 修复：跳过隐藏字段的单元格渲染
      if (field.hidden === true) {
        console.log(`🚫 跳过隐藏字段单元格: ${field.field}`);
        return;
      }
      
      const td = document.createElement("td");
      const fieldKey = field.field || field.key;
      td.setAttribute("data-field", fieldKey);
      
      const cellValue = row[fieldKey] || '';
      
      // 格式化单元格值
      if (field.formatter) {
        td.innerHTML = field.formatter(cellValue, row);
      } else {
        td.textContent = cellValue;
      }
      
      // 应用样式
      if (field.className) {
        td.className = field.className;
      }
      if (field.align) {
        td.style.textAlign = field.align;
      }
      
      tr.appendChild(td);
    });
    
    // 🔧 优化：支持自定义操作按钮配置
    const moduleActions = options.actions || MODULE_ACTIONS[moduleName];
    if (moduleActions && moduleActions.length > 0) {
      const td = document.createElement("td");
      td.style.textAlign = "center";
      
      const buttons = moduleActions.map(action => {
        const handler = options.customHandlers?.[action.handler] || window[action.handler];
        const btnClass = action.className || 'btn btn-primary btn-sm';
        
        if (handler) {
          // 修复按钮事件绑定：统一使用student_id进行跨表查询
          let onclickCode;
          if (action.handler === 'showStudentHistory' || action.handler === 'selectStudent' || 
              action.handler === 'showStudentInfo' || action.handler === 'addVisionRecord' || 
              action.handler === 'viewStudentRecord') {
            // 🔧 修复：严格使用学生唯一ID，不允许使用行号
            const studentId = row.student_id || row.id;
            if (!studentId) {
              console.error(`❌ 严重错误：行数据缺少学生唯一ID，无法绑定操作按钮`);
              console.error(`❌ 行数据:`, row);
              console.error(`❌ 行索引:`, index);
              // 禁用按钮而不是使用错误的行号
              return `<button class="${btnClass}" disabled title="数据错误：缺少学生ID">${action.text}</button>`;
            }
            console.log(`🔧 调试信息 - 行数据:`, row);
            console.log(`🔧 参数选择 - student_id: ${row.student_id}, id: ${row.id}, 最终选择: ${studentId}`);
            onclickCode = `${action.handler}('${studentId}')`;
            console.log(`🔧 操作按钮绑定: ${action.handler}('${studentId}') - 来源: ${row.student_id ? 'student_id' : 'id'}`);
          } else {
            // 其他模块：传递行数据和索引
            onclickCode = `${action.handler}(${JSON.stringify(row).replace(/"/g, '&quot;')}, ${index})`;
          }
          
          return `<button class="${btnClass}" onclick="${onclickCode}">${action.text}</button>`;
        } else {
          console.warn(`❌ 找不到操作处理函数: ${action.handler}`);
          return `<button class="${btnClass}" disabled>${action.text}</button>`;
        }
      }).join(' ');
      
      td.innerHTML = buttons;
      tr.appendChild(td);
    }
    
    tableBody.appendChild(tr);
  });
}

/**
 * 渲染空表格
 */
function renderEmptyTable(tableBody, columnCount) {
  const tr = document.createElement("tr");
  const td = document.createElement("td");
  td.colSpan = columnCount;
  td.className = "text-center text-muted";
  td.style.padding = "20px";
  td.textContent = "暂无数据";
  tr.appendChild(td);
  tableBody.appendChild(tr);
}

/**
 * 渲染错误表格
 */
function renderErrorTable(tableBody, errorMessage) {
  const tr = document.createElement("tr");
  const td = document.createElement("td");
  td.colSpan = "100%";
  td.className = "text-center text-danger";
  td.style.padding = "20px";
  td.textContent = errorMessage;
  tr.appendChild(td);
  tableBody.appendChild(tr);
}

/**
 * 渲染分页
 */
function renderTablePagination(pagination, containerId) {
  const paginationContainer = document.getElementById(`${containerId}Pagination`);
  if (!paginationContainer) return;
  
  paginationContainer.innerHTML = "";
  
  const { total, page, perPage, onPageChange } = pagination;
  const totalPages = Math.ceil(total / perPage);
  
  if (totalPages <= 1) return;
  
  // 上一页
  const prevLi = document.createElement("li");
  prevLi.className = `page-item ${page <= 1 ? 'disabled' : ''}`;
  prevLi.innerHTML = `<a class="page-link" href="#">上一页</a>`;
  if (page > 1) {
    prevLi.addEventListener("click", (e) => {
      e.preventDefault();
      onPageChange(page - 1);
    });
  }
  paginationContainer.appendChild(prevLi);
  
  // 页码
  const startPage = Math.max(1, page - 2);
  const endPage = Math.min(totalPages, page + 2);
  
  for (let i = startPage; i <= endPage; i++) {
    const li = document.createElement("li");
    li.className = `page-item ${i === page ? 'active' : ''}`;
    li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
    li.addEventListener("click", (e) => {
      e.preventDefault();
      if (i !== page) onPageChange(i);
    });
    paginationContainer.appendChild(li);
  }
  
  // 下一页
  const nextLi = document.createElement("li");
  nextLi.className = `page-item ${page >= totalPages ? 'disabled' : ''}`;
  nextLi.innerHTML = `<a class="page-link" href="#">下一页</a>`;
  if (page < totalPages) {
    nextLi.addEventListener("click", (e) => {
      e.preventDefault();
      onPageChange(page + 1);
    });
  }
  paginationContainer.appendChild(nextLi);
}

/**
 * 格式化单元格值
 */
function formatCellValue(value, fieldConfig) {
  if (value === null || value === undefined) return '';
  
  // 如果是对象配置，检查类型
  if (typeof fieldConfig === 'object' && fieldConfig.type) {
    switch (fieldConfig.type) {
      case 'date':
        return formatDate(value);
      case 'time':
        return formatTime(value);
      case 'datetime':
        return formatDateTime(value);
      case 'number':
        return formatNumber(value, fieldConfig.precision);
      case 'currency':
        return formatCurrency(value);
      case 'percentage':
        return formatPercentage(value);
      case 'boolean':
        return value ? '是' : '否';
      default:
        return String(value);
    }
  }
  
  return String(value);
}

/**
 * 获取字段显示名称（配置驱动）
 * @param {string} fieldName - 字段名
 * @param {Array} fieldConfig - 字段配置数组
 * @returns {string} 显示名称
 */
function getQueryFieldDisplayName(fieldName, fieldConfig = []) {
  // 优先从字段配置中获取显示名称
  const config = fieldConfig.find(field => field.field === fieldName);
  if (config && config.display_name) {
    return config.display_name;
  }
  
  // 如果配置中没有，返回字段名本身
  return fieldName;
}

/**
 * 日期格式化函数
 */
function formatDate(value) {
  if (!value) return '';
  const date = new Date(value);
  return date.toLocaleDateString('zh-CN');
}

function formatTime(value) {
  if (!value) return '';
  const date = new Date(value);
  return date.toLocaleTimeString('zh-CN', { hour12: false });
}

function formatDateTime(value) {
  if (!value) return '';
  const date = new Date(value);
  return date.toLocaleString('zh-CN');
}

function formatNumber(value, precision = 2) {
  if (isNaN(value)) return value;
  return Number(value).toFixed(precision);
}

function formatCurrency(value) {
  if (isNaN(value)) return value;
  return `¥${Number(value).toLocaleString('zh-CN', { minimumFractionDigits: 2 })}`;
}

function formatPercentage(value) {
  if (isNaN(value)) return value;
  return `${(Number(value) * 100).toFixed(1)}%`;
}

// 导出函数到全局
window.renderQueryResultTable = renderQueryResultTable;
window.getModuleQueryColumns = getModuleQueryColumns;
